<script setup>
import { ref,defineProps, defineEmits, watch  } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useUserStore} from '@/stores'

const userStore =  useUserStore()
const loading = ref(false)
const imageUrl =ref('')


//父组件传过来的
const props = defineProps({
  propImageUrl: String
})



const emit = defineEmits(['imageChange'])

//设置上传的请求头部 增加token
const headers = {
  token: userStore.token
}


 

//上传成功后
const onUploadSuccess = (response, file, fileList) => {  
// console.log("成功", response, file,fileList)
emit('imageChange', `${response.data}`)
ElMessage.success('上传成功')
}

//上传失败
const onUploadError = (err, file,fileList) => {
ElMessage.error('Image upload failed!')
}



//图片规制
const beforeAvatarUpload = (rawFile) => {
  ElMessage.success('正在上传，请稍等几秒!')
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/gif' ) {
    ElMessage.error('请你选择合适的图片!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

//删除图片
const oploadImgDel = () =>{
  emit('imageChange', '')
}

</script>


<template>
  <el-upload 
    class="avatar-uploader"
    :show-file-list="false"
    :auto-upload="true"
    action="/api/common/upload"
    :on-success="onUploadSuccess"
    :on-error="onUploadError"
    :headers="headers"
    :before-upload="beforeAvatarUpload"
    >

    <img v-if="propImageUrl" :src="propImageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon">
      <Plus />
      
    </el-icon>
    <span v-if="propImageUrl"
            class="el-upload-list__item-actions">
    <span class="el-upload-span"
              @click.stop="oploadImgDel">
          删除图片
        </span>
        <span class="el-upload-span"> 重新上传 </span>
      </span>
  </el-upload>
  
  <p class="upload-tips">
      <slot />
    </p>
</template>



<style scoped lang="scss">
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }

    .el-upload-span {
  width: 100px;
  height: 30px;
  border: 1px solid #ffffff;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
}

.el-upload-span:first-child {
  margin-bottom: 20px;
}

.el-upload-list__item-actions:hover .upload-icon {
  display: inline-block;
}

.el-upload-list__item-actions:hover {
  opacity: 1;
}

  }
}
.upload-tips {
  font-size: 12px;
  color: #666666;
  display: inline-block;
  line-height: 17px;
  margin-left: 36px;
}
</style>